<clr-wizard #wizard [(clrWizardOpen)]="createOpened" [clrWizardClosable]="false" (clrWizardOnCancel)="onCancel()"
            (clrWizardOnFinish)="onSubmit()">
  <clr-wizard-title>创建区域</clr-wizard-title>

  <clr-wizard-button [type]="'cancel'">取消</clr-wizard-button>
  <clr-wizard-button [type]="'previous'">上一步</clr-wizard-button>
  <clr-wizard-button [type]="'next'">下一步</clr-wizard-button>
  <clr-wizard-button [type]="'finish'">完成</clr-wizard-button>

  <clr-wizard-page [clrWizardPageNextDisabled]="regionForm.invalid">
    <ng-template clrPageTitle>基本信息</ng-template>
    <form clrForm #regionForm="ngForm">
      <clr-input-container>
        <label>名称</label>
        <input clrInput size=45 type="text" maxlength="15" pattern="{{name_pattern}}" [(ngModel)]="item.name" name="name" (blur)="nameOnBlur()" required>
        <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.errors.required">此字段为必填项</clr-control-error>
        <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.errors.repeat">名称重复</clr-control-error>
        <clr-control-error *ngIf="nameCtrl&&nameCtrl.errors&&nameCtrl.invalid">{{name_pattern_tip}}</clr-control-error>
        <clr-control-helper>{{name_pattern_tip}}</clr-control-helper>
      </clr-input-container>
      <clr-select-container>
        <label>提供商</label>
        <select clrSelect [(ngModel)]="item.template" name="provider" (change)="onTemplateChange()" required>
          <option value=''>请选择</option>
          <option *ngFor="let template of cloudTemplates" [value]="template.name">{{template.name}}</option>
        </select>
        <clr-control-error>此字段为必填项</clr-control-error>
      </clr-select-container>
    </form>
  </clr-wizard-page>
  <clr-wizard-page [clrWizardPageNextDisabled]="paramsForm.invalid||!isParamsValid">
    <ng-template clrPageTitle>配置参数</ng-template>
    <form clrForm #paramsForm='ngForm'>
      <div *ngIf="item.template === 'vsphere'">
        <div>
          <clr-input-container>
            <label>vCenter Host</label>
            <input clrInput size=45 type="text" [(ngModel)]="item.vars['vc_host']" name="vc_host" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>vCenter API地址</clr-control-helper>
          </clr-input-container>
        </div>
        <div>
          <clr-input-container>
            <label>vCenter 端口</label>
            <input clrInput size=45 type="number" [(ngModel)]="item.vars['vc_port']" name="vc_port" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>访问 vCenter API的端口，例如http: 80 https: 443</clr-control-helper>
          </clr-input-container>
        </div>
        <div>
          <clr-input-container>
            <label>用户名</label>
            <input clrInput size=45 type="text" [(ngModel)]="item.vars['vc_username']" name="vc_username" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>访问 vCenter 的用户名，例如 administrator@vsphere.local</clr-control-helper>
          </clr-input-container>
        </div>
        <div>
          <clr-password-container>
            <label>密码</label>
            <input clrPassword size=45 type="password" [(ngModel)]="item.vars['vc_password']" name="vc_password"
                   required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>访问 vCenter 的密码</clr-control-helper>
          </clr-password-container>
        </div>
        <button class="btn" [disabled]="isParamsCheckGoing || paramsForm.invalid" (click)="onCheckParams()">
          <i *ngIf="isParamsCheckGoing" class="fa fa-spinner fa-pulse"></i>
          验证
        </button>
        <span *ngIf="isParamsValid&&!isParamsCheckGoing" style="color: #859900;">参数有效！</span>
        <span *ngIf="isParamsValid==false&&!isParamsCheckGoing" style="color: #e02200;"> 参数无效,请检查 vCenter 连接信息！</span>
      </div>
      <div *ngIf="item.template === 'openstack'">
        <div>
          <clr-input-container>
            <label>Identity</label>
            <input clrInput type="text" [(ngModel)]="item.vars['openstack_identity']" name="openstack_identity" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>OpenStack keystone地址</clr-control-helper>
          </clr-input-container>
        </div>
        <div>
          <clr-input-container>
            <label>用户名</label>
            <input clrInput type="text" [(ngModel)]="item.vars['openstack_username']" name="openstack_username" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>访问 OpenStack 的用户名</clr-control-helper>
          </clr-input-container>
        </div>
        <div>
           <clr-password-container>
            <label>用户密码</label>
            <input clrPassword type="text" [(ngModel)]="item.vars['openstack_password']" name="openstack_password" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>访问 OpenStack 的密码</clr-control-helper>
          </clr-password-container>
        </div>
        <div>
          <clr-input-container>
            <label>项目ID</label>
            <input clrInput type="text" [(ngModel)]="item.vars['openstack_projectId']" name="openstack_projectId" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>OpenStack 项目ID</clr-control-helper>
          </clr-input-container>
        </div>
        <div>
          <clr-input-container>
            <label>Domain Name</label>
            <input clrInput type="text" [(ngModel)]="item.vars['openstack_domain_name']" name="openstack_domain_name" required>
            <clr-control-error>此字段为必填项</clr-control-error>
            <clr-control-helper>OpenStack Domain Name</clr-control-helper>
          </clr-input-container>
        </div>
        <button class="btn" [disabled]="isParamsCheckGoing || paramsForm.invalid" (click)="onCheckParams()">
          <i *ngIf="isParamsCheckGoing" class="fa fa-spinner fa-pulse"></i>
          验证
        </button>
        <span *ngIf="isParamsValid&&!isParamsCheckGoing" style="color: #859900;">参数有效！</span>
        <span *ngIf="isParamsValid==false&&!isParamsCheckGoing" style="color: #e02200;"> 参数无效,请检查 OpenStack 连接信息！</span>
      </div>
    </form>
  </clr-wizard-page>
  <clr-wizard-page [clrWizardPageNextDisabled]="dtFrom.invalid">
    <ng-template clrPageTitle>数据中心</ng-template>
    <form clrForm #dtFrom='ngForm'>
      <clr-select-container>
        <label>数据中心</label>
        <select clrSelect *ngFor="let c_region of cloudRegions" [(ngModel)]="item.cloud_region" name="cloud-region"
                required>
          <option value="">请选择</option>
          <option [value]="c_region">{{c_region}}</option>
          <clr-control-error>此字段为必填项</clr-control-error>
        </select>
      </clr-select-container>
    </form>
  </clr-wizard-page>
</clr-wizard>



